<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>喜茶订单</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
    .finish {
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <div class="jumbotron jumbotron-fluid bg-success p-5 text-light">
    <div class="container">
      <h1>喜茶</h1>
      <p class="text-white">订单平台</p>
    </div>
  </div>
  <div id="app" class="container">
    <div class="row">
      <div class="col-lg-6 col-sm-12">
        <form>
          <div class="form-group">
            <label>饮品</label>
            <select class="form-control" v-model="drink">
              <option v-for="d in drinks" :key="d.id" :value="d.title">{{d.title}}</option>
            </select>
          </div>

          <div class="form-group">
            <label>杯型</label>
            <div>
              <div class="form-check form-check-inline" v-for="(v,i) in sizes" :key="i">
                <label class="form-check-label">
                  <input type="radio" class="form-check-input" :value="v" v-model="sizeChecked">
                  {{v}}
                </label>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label>甜度</label>
            <div>
              <div class="form-check form-check-inline" v-for="(v,i) in sugers" :key="i">
                <label class="form-check-label">
                  <input type="radio" class="form-check-input" :value="v" v-model="sugerChecked">
                  {{v}}
                </label>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label>温度</label>
            <div>
              <div class="form-check form-check-inline" v-for="(v,i) in temps" :key="i">
                <label class="form-check-label">
                  <input type="radio" class="form-check-input" :value="v" v-model="tempChecked">
                  {{v}}
                </label>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label>配料</label>
            <div>
              <div class="form-check form-check-inline" v-for="(v,i) in opts" :key="i">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" :value="v" v-model="optChecked">
                  {{v}}
                </label>
              </div>
            </div>
          </div>

          <!-- 杯型按钮 -->
          <div class="mt-3">
            <button type="button"
            class="btn btn-outline-danger m-3"
            v-for="(v, i) in sizes" :key="i"
            @click="onSize(v)"
            :class="{active: v === sizeChecked}"
            >{{v}}</button>
          </div>
          
          <!-- 选择展示 -->
          <div class="py-3">
            <h3>{{drink}}+{{sizeChecked}}+{{sugerChecked}}+{{tempChecked}}+{{optChecked}}</h3>
          </div>

          <!-- 提交 -->
          <button type="button"
          class="btn btn-success btn-block mt-2"
          @click="sendOrder()"
          >下单</button>

        </form>
      </div>
      <div class="col-lg-6 col-sm-12 mt-4">
        <table class="table table-hover table-striped text-center align-items-center">
          <thead>
            <tr class="text-center">
              <th>饮品</th>
              <th>杯型</th>
              <th>甜度</th>
              <th>温度</th>
              <th class="w-25">配料</th>
              <th class="w-10">出货</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(order, i) in orders" :key="i"
            :class="[order.finished?'text-danger finish':'']"
            >
              <td>{{order.drink}}</td>
              <td>{{order.size}}</td>
              <td>{{order.suger}}</td>
              <td>{{order.temp}}</td>
              <td>
                <span v-for="(v,i) in order.opt" :key="i"
                class="badge badge-pill badge-danger ml-2"
                >{{v}}</span>
              </td>
              <td>
                <button type="button" class="btn btn-sm btn-block"
                :class="[order.finished?'btn-danger':'btn-primary']"
                @click="finish(order)"
                >{{order.finished ? '已出':'出货'}}</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data() {
        return {
          drink: '红茶',
          drinks: [
            {id:0, title: '黑茶'},
            {id:1, title: '红茶'},
            {id:2, title: '绿茶'},
            {id:3, title: '乌龙茶'},
          ],
          sizes: ['超大杯', '大杯', '中杯', '小杯'],
          sizeChecked: '大杯',
          temps: ['常温', '加冰'],
          tempChecked: '常温',
          sugers: ['甜', '半糖', '少糖', '无糖'],
          sugerChecked: '无糖',
          opts: ['红豆', '珍珠', '椰果', '牛奶'],
          optChecked: [],
          orders:[]
        }
      },
      methods: {
        onSize(s) {
          this.sizeChecked = s
        },
        sendOrder() {
          this.orders.unshift({
            drink: this.drink,
            size: this.sizeChecked,
            temp: this.tempChecked,
            suger: this.sugerChecked,
            opt: this.optChecked,
            finished: false,
          })
        },
        finish(item) {
          item.finished = !item.finished
        }
      }
    })
  </script>

</body>
</html>